<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  .close {
    
    color: rgb(172, 10, 10);
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
    top: -3px;
    right: -1px;
    position: absolute;
}
/* use cross as close button */
   .close::before {
    content: "\2716";
}
div{
    background-color: rgb(225, 243, 199);
    width: 330px;
    height: 150px;
    border: 1px solid rgb(19, 192, 19);
    position: relative;
}
</style>
<body>

<div id="one" >
    <b>Horse</b>
    <span class="close" ></span>
    <p>The horse is one of two extant subspecies of Equus ferus.The horse has evolved over 
            the past 45 to 55 million years from a small multi-toed creature into the large.</p>
</div>
<div id="two" >
    <b>Donkey</b>
    <span class="close" ></span>
    <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family,
             Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus.</p>
</div>
<div id="three">
    <b>Cat</b>
    <span class="close" ></span>
    <p>The domestic cat (Latin: Felis catus) or the feral cat (Latin: Felis silvestris catus) is 
            a small typically furry carnivorous mammal</p>
  
</div>
<script>
  let one=document.getElementById('one');
  one.onclick=function(){
    one.style.display="none";
  }
  let two=document.getElementById('two');
  two.onclick=function(){
    two.style.display="none";
  }
  let three=document.getElementById('three');
  three.onclick=function(){
    three.style.display="none";
  }
</script>
</body>